<template>
	<div>
		<!-- 头部 -->
		<div class="main_header">
			<div style="height: 5vh; width: 100vw;line-height: 5vh; display: flex;color: #FFFFFF;">
				<div style="width: 5vw;margin-left: 85vw;">
					<van-icon name="service-o" size="20" />
				</div>
				<div style="margin-left: 2vw;" @click="SetUp">
					<van-icon name="setting-o" size="20" />
				</div>
			</div>
			<!-- 头像登录切换 -->
			<div style="color: #fff; line-height: 15vh; display: flex; width: 100vw;height: 15vh;">
				<div style="width: 90vw;">
					<div v-if="this.userInfo" style="display: flex;">
						<div style="width: 30vw;height: 15vh;">
							<img :src="userInfo.headerImg"
								style="margin-top: 2vh; width: 22vw;height: 12vh;border-radius: 50%;">
						</div>
						<div style="width: 60vw;text-align: left;">
							<div>{{userInfo.nickName}}</div>
						</div>

					</div>
					<div v-else>
						<LoginBtn></LoginBtn>
					</div>
				</div>
				<div style="width: 10vw;">
					<van-icon name="arrow" size="30" />
				</div>
			</div>
			<!-- 关注 -->
			<div style="width: 100vw;display: flex;color: #fff;justify-content: space-around;margin-top: 2vh;">
				<div>
					<div style="font-size: 1.8rem;">68</div>
					<div style="font-size: 1rem;margin-top: 1vh;" @click="Gz">关注</div>
				</div>
				<div>
					<div style="font-size: 1.8rem;">0</div>
					<div style="font-size: 1rem;margin-top: 1vh;">粉丝</div>
				</div>
				<div>
					<div style="font-size: 1.8rem;">85</div>
					<div style="font-size: 1rem;margin-top: 1vh;" @click="Sc">收藏</div>
				</div>
			</div>

		</div>
	</div>
</template>

<script>
	import LoginBtn from '../loginBtn.vue'
	export default {
		components: {
			LoginBtn
		},
		data() {
			return {
				userInfo: {}
			}
		},
		created() {
			let userInfo = JSON.parse(localStorage.getItem('userInfo'))
			this.userInfo = userInfo
			// console.log(this.userInfo,666)
		},
		methods: {
			Gz(){
				this.$router.push('/Interest')
			},
			Sc(){
				this.$router.push('/Interest')
			},
			
			SetUp() {
				// console.log(1111)
				this.$router.push('/SetUp')
			}
		}
	}
</script>

<style>
	.main_header {
		width: 100vw;
		height: 30vh;
		background-color: #000000;
	}
</style>
